<template>
    <el-row 
    v-loading="loading"
    element-loading-text="拼命加载中" 
    element-loading-spinner="el-icon-loading">
        <div id="container" class="map"></div>
    </el-row>
</template>

<script>
export default {
    props:{
        hotelList:{
            type:Array,
            default(){
                return [];
            }
        }
    },
    data(){
        return{
            map:null,
            markers:[]
        }
    },
    watch:{
        // 监听酒店数据变更，以便获取markers
        hotelList:{
            deep:true,
            handler(){
                this.getMarkersByHotelList();
            }
        }
    },
    methods:{
        createMap(){
            this.map = new AMap.Map('container', {
                zoom:21,//级别
                //center: [113.32459, 23.10668]//中心点坐标
            });
        },
        getMarkersByHotelList(){
            this.markers = [];
            this.hotelList.forEach((item,index) => {
                let obj = {
                    icon:'https://webapi.amap.com/theme/v1.3/markers/b/mark_b.png',
                    title: item.name,
                    content: '<div>'+item.name+'</div>', 
                    position: [item.location.longitude, item.location.latitude],
                    index:index + 1,//数字标注
                    extData:item.id
                }
                this.markers.push(obj);
            });
        },
        loadMap(){
            if(this.markers){
                map.clearMap();  // 清除地图覆盖物

                this.markers.forEach(function(item) {
                    let marker = new AMap.Marker({
                        map: map,
                        icon:new AMap.Icon({            
                            image: item.icon,
                            size: new AMap.Size(38, 60),  //图标大小
                            imageSize: new AMap.Size(22, 36)
                        }),        
                        position: [item.position[0], item.position[1]],
                        extData:item.extData
                    });
                    // 设置覆盖物
                    marker.setTop();

                    // 显示一个提示窗
                    const infoWin = new AMap.InfoWindow({
                        content:`<span style="font-size:12px;color:#333;">${item.title}</span>`,
                        offset:new AMap.Pixel(0,-32)
                    });

                    marker.setLabel({
                        content:item.index
                    })

                    // 给marker添加悬浮事件
                    AMap.event.addListener(marker,'mouseover',function(e){
                        if(marker.getExtData() == e.target.Ce.extData){
                            infoWin.open(map,marker.getPosition());
                        }
                    });
                    AMap.event.addListener(marker,'mouseout',function(e){
                        if(mark.getExtData() == e.target.Ce.extData){
                            infoWin.close(map,marker.getPosition());
                        }
                    });
                });
                // 让地图自适应显示所有点
                map.setFitView();
            }
        }
    }
}
</script>

<style lang="less" scoped>
.map{
    width: 407px;
    height: 260px;
}
#container /deep/.amap-marker-label{
    border:0;
    background: transparent;
 }
#container /deep/.amap-marker-label{
    width:22px;
    border:0 none; 
    background: transparent;
    text-align: center;
    //padding:0 5px 0 4px;
    line-height: 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 450;
    transform: translate(-3px,-2px);//平移
}
</style>